﻿@{
    Layout = null;
}

<div class="row">
    <div class="col-sm-12">
        <ol class="breadcrumb">
            <li><a href="index-2.html#">Promociones</a></li>
            <li><a href="index-2.html#">Configuración</a></li>
            <li class="active">Buscar Promociones</li>
        </ol>

        <div class="box">
            <div class="box-header">
                <h2>Buscar Promociones</h2>
            </div>

            <div class="toolbar">
                <a id="btn_BuscarPromocion" role="button" class="btn btn-sm btn-primary"><i class="icon-search"></i>&nbsp;Buscar</a>
                <a id="btn_NuevaPromocion" role="button" class="btn btn-sm btn-default"><i class="icon-file-alt"></i>&nbsp;Nueva Promoción</a>
                <a id="btn_CancelarPromocion" role="button" class="btn btn-sm btn-default"><i class="icon-remove"></i>&nbsp;Cancelar</a>
            </div>

            <div class="box-content">
                <div id="PromocionSearchVM" class="col-sm-12 well">
                    <div class="form-horizontal">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="col-sm-4">
                                    <label class="control-label">Código</label>
                                    <div class="col-sm-12 no-padding">
                                        <input id="txt_Codigo" class="form-control focused" type="text" placeholder="Ingrese código de promoción…" data-bind="value: SearchFilters.codigo">
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <label class="control-label">Descripción</label>
                                    <div class="col-sm-12 no-padding">
                                        <input id="txt_Descripcion" class="form-control focused" type="text" placeholder="Ingrese descripción…" data-bind="value: SearchFilters.descripcion">
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="col-sm-12 no-padding">
                                        <label class="control-label">Estado</label>
                                    </div>
                                    <div class="col-sm-12 no-padding">
                                        <input id="ddl_Estado" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                            data-bind="value: SearchFilters.estadoGeneral, source: estadosGeneralesDS" data-value-field="IdEstadoGeneral" data-text-field="Nombre" style="width: 100%" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-horizontal">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="col-sm-4">
                                    <div class="col-sm-12 no-padding">
                                        <label class="control-label">Desde</label>
                                    </div>
                                    <div class="col-sm-12 no-padding">
                                        <input id="dtp_Desde" data-role="datepicker" data-format="dd/MM/yyyy" data-bind="value: SearchFilters.fechaInicio" />
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="col-sm-12 no-padding">
                                        <label class="control-label">Hasta</label>
                                    </div>
                                    <div class="col-sm-12 no-padding">
                                        <input id="dtp_Hasta" data-role="datepicker" data-format="dd/MM/yyyy" data-bind="value: SearchFilters.fechaTermino" />
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="space-12"></div>
                                    <div class="controls">
                                        <div class="col-sm-4 no-padding-left">
                                            <label class="checkbox inline">
                                                <input type="checkbox" id="chk_Vigentes" data-bind="checked: SearchFilters.esVigente">
                                                Vigentes
                                            </label>
                                        </div>
                                        @*<div class="col-sm-4 no-padding-left">
                                            <label class="checkbox inline">
                                                <input type="checkbox" value="option1" id="chk_Todas">
                                                Todas
                                            </label>
                                        </div>*@
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="PromocionListVM">
                    <div class="col-sm-12 well">
                        <div class="form-horizontal">
                            <div class="col-sm-12">
                                <label>Lista de Promociones</label>
                            </div>

                            <div class="col-sm-12">
                                <div id="grd_PromocionesList" data-role="grid"
                                    data-bind="source: promocionesDS"
                                    data-scrollable="true"
                                    data-column="true" data-navigatable="true" data-selectable="row"
                                    data-pageable="true" data-sortable="true"
                                    data-filterable="true" data-resizable="true" data-groupable="true"
                                    data-columns='[        
                                        { "template": "<i class=\"icon-eye-open blue\" onclick=\"View(#= IdPromocion #);\" style=\"cursor:pointer\"></i>", "width": "3%" },
                                        { "field": "IdPromocion",                   "hidden": "true"  },
                                        { "field": "Codigo",                        "title": "Código",          "width": "10%"  },
                                        { "field": "Descripcion",                   "title": "Descripción",     "width": "38%"  },
                                        { "template": "#= GetShortJSONDate(FechaInicio) #",          "title": "Inicio",     "width": "15%" },
                                        { "template": "#= GetShortJSONDate(FechaTermino) #",         "title": "Fin",        "width": "15%" },
                                        { "field": "EstadoGeneral.Descripcion",     "title": "Estado",          "width": "20%"  },
                                        { "field": "Opciones",                      "title": "Opciones",        "hidden": "true"  },
                                    ]'>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var PromocionSearchVM = null,
        PromocionListVM = null;

    $(document).ready(function () {
        PromocionSearchVM = new kendo.observable({
            SearchFilters: {
                codigo: '',
                descripcion: '',
                estadoGeneral: '',
                fechaInicio: '',
                fechaTermino: '',
                esVigente: true,
                rowStatus: true
            },
            estadosGeneralesDS: AjaxModelActionPost('@Url.Action("GetEntities", "EstadoGeneral")')
        });

        PromocionListVM = new kendo.observable({
            promocionesDS: []
        });

        kendo.bind($('#PromocionSearchVM'), PromocionSearchVM);
        kendo.bind($('#PromocionListVM'), PromocionListVM);

        GetList();
        SetGridItem_dblClick('@Url.Action("Details", "Promocion")', '#grd_PromocionesList');
        SetDefaultKeyDownAction('.box-content', 'BuscarPromocion');

        /* start: Toolbar actions */
        $('#btn_BuscarPromocion').click(function (e) {
            e.preventDefault();
            BuscarPromocion();
        });

        $('#btn_NuevaPromocion').click(function(e) {
            e.preventDefault();
            RenderContentHtml('@Url.Action("Edit", "Promocion")', '#content');
        });

        $('#btn_CancelarPromocion').click(function(e) {
            e.preventDefault();
            ClearFilters();
            GetList();
        });
        /* end: Toolbar actions */
    });

    function BuscarPromocion() {
        GetList();
    }

    function View(id) {
        RenderContentHtml('@Url.Action("Details", "Promocion")?id=' + id, '#content');
    }

    function GetList() {
        var promocionesDS = AjaxParamsActionPost('@Url.Action("GetEntities", "Promocion")', {
                                                    codigo: $('#txt_Codigo').val(),
                                                    descripcion: $('#txt_Descripcion').val(),
                                                    estadoGeneral: $('#ddl_Estado').val(),
                                                    fechaInicio: GetShortDate($('#dtp_Desde').data("kendoDatePicker").value()),
                                                    fechaTermino: GetShortDate($('#dtp_Hasta').data("kendoDatePicker").value()),
                                                    esVigente: $('#chk_Vigentes').is(':checked'),
                                                    rowStatus: true
                                                });

        PromocionListVM.set('promocionesDS', promocionesDS);
        kendo.bind($('#PromocionListVM'), PromocionListVM);
        $('#grd_PromocionesList').data('kendoGrid').dataSource.page(1);
    }

    function ClearFilters() {
        PromocionSearchVM.SearchFilters.set('codigo', null);
        PromocionSearchVM.SearchFilters.set('descripcion', null);
        PromocionSearchVM.SearchFilters.set('estadoGeneral', null);
        PromocionSearchVM.SearchFilters.set('fechaInicio', null);
        PromocionSearchVM.SearchFilters.set('fechaTermino', null);
        PromocionSearchVM.SearchFilters.set('esVigente', false);
        PromocionSearchVM.SearchFilters.set('rowStatus', true);
    }
</script>
